<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
<title>网易云音乐</title>
<link rel="stylesheet" type="text/css" href="css/header.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" href="./css/swiper.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-inverse top" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            

          </button>
          <div class="logo clear">
          <img src="images/logo.png" class="fl">
          <div class="navbar-brand" href="#">网易云音乐</div></div>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">发现音乐</a></li>
                <li><a href="demo.html">我的音乐</a></li>
                <li><a href="#">朋友</a></li>
                <li><a href="#">商城</a></li>
                <li><a href="#">音乐人</a></li>
                <li><a href="#">下载客户端</a></li>
            </ul>
          <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="音乐/电台/用户" border-radius="50%">
              </div>
                <button type="submit" class="btn btn-default">搜索</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">视频投稿</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">登录 <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="login.html">手机号登录</a></li>
                <li><a href="wechat.html">微信登录</a></li>
                <li><a href="#">QQ登录</a></li>
                 <li><a href="#">新浪微博登录</a></li>
                <li><a href="#">网易邮箱账号登录</a></li>
            
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div>
    </nav>
  <ul class="nav nav-pills toplist">
       <li class=""><a  href="#">推荐</a> </li>
       <li><a href="anchor station.html">排行榜</a></li>
       <li><a href="gedan.html">歌单</a></li>
         <li><a href="">主播电台</a></li>
      <li><a href="">歌手</a></li>
      <li><a href="xindie.html">新碟上架</a></li>
</ul>

 
    <script src="js/jquery-3.2.1.js"></script>  
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">

        $('.nav-tabs a').click(function(e){
          e.preventDefault();
          $(this).tab('show');
        });

    </script>




   
<div id="background"></div>
<div id="player">
	<div class="cover"></div>
	<div class="ctrl">
		<div class="tag">
			<strong>Title</strong>
			<span class="artist">Artist</span>
			<span class="album">Album</span>
		</div>
		<div class="control">
			<div class="left">
				<div class="rewind icon"></div>
				<div class="playback icon"></div>
				<div class="fastforward icon"></div>
			</div>
			<div class="volume right">
				<div class="mute icon left"></div>
				<div class="slider left">
					<div class="pace"></div>
				</div>
			</div>
		</div>
		<div class="progress">
			<div class="slider">
				<div class="loaded"></div>
				<div class="pace"></div>
			</div>
			<div class="timer left">0:00</div>
			<div class="right">
				<div class="repeat icon"></div>
				<div class="shuffle icon"></div>
			</div>
		</div>
	</div>
</div>
<ul id="playlist"></ul>

<script src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/script.js"></script>

</body>
</html>